<template>
  <header id="header">
    <div class="navbox">
      <h2 id="mnavh"><span class="navicon"></span></h2>
      <div class="logo">
        <router-link to="/">{{about.name}}</router-link>
      </div>
      <nav>
        <ul id="starlist">
          <li v-for="item in headerMune" :key="item.id">
            <router-link class="btit" :to="{ name: item.name }">{{item.text}}</router-link>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { dynamicGetAbout } from '@/api/about'

  export default {
    computed: {
      ...mapGetters([
        'userId',
        'name',
        'avatar'
      ])
    },
    data() {
      return {
        headerMune: [
          {
            name: 'index',
            text: '首页',
          },
          {
            name: 'services-list',
            text: '美容服务',
          },
          {
            name: 'commodity-list',
            text: '美容产品',
          },
          {
            name: 'information-list',
            text: '新闻资讯',
          },
          {
            name: 'notice-list',
            text: '通知公告',
          },
          {
            name: 'leaves-add',
            text: '留言反馈',
          },
        ],
        about: {},
      }
    },
    created() {
      this.dynamicGetAbout()
    },
    methods: {
      async logout() {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      },
      search() {
        this.$router.push({ name: 'ScenicSearch', params: { name: this.searchName } })
      },
      dynamicGetAbout() {
        const data = {}
        data.status = 1
        dynamicGetAbout(data).then(response => {
          this.about = response.data
        })
      },
    }
  }
</script>
